<template>
	<view class="marpadd ">
		<view style="height: 150rpx;background: #192033;">

		</view>
		<view class="mar" style="width: 95%;margin-bottom: 2%;margin-top: -20%;">
			<view class="mar" style="width: 90%">
				<!-- 用户信息 -->
				<view class="df info-bc" style="
					background-image: url('http://loto.oss-cn-shanghai.aliyuncs.com/email/3180c51d2ba24f0e.png');
				  ">
					<view class="d-a-center" style="padding: 0 3% 0 5%">
						<img :src="userInfo.avatarJson" alt=""
							style="width: 120rpx; height: 120rpx;border-radius: 50%;" />
					</view>
					<view class="d-a-center">
						<view class="change-flex d-j-bet" style="height: 40%">
							<view class="user-name df">
								{{ userInfo.nick }}
								<view class="" style="margin-left: 5%;margin-top: 3%;">
									<img v-if="isVip==1"
										src="http://loto.oss-cn-shanghai.aliyuncs.com/email/c7d62813c35a44c8.png"
										style="width: 48rpx;height: 34rpx" alt="">
								</view>
							</view>
							<view class="delineSty">
								{{isVipDeline}}
							</view>
						</view>
					</view>
				</view>
				<view v-if="isVip != 1" class="menus-name" style="margin: 2% 0 3% 0;">
					会员套餐
				</view>
				<view class="" v-if="isVip != 1">
					<view class=" boxll" v-for="(item, index) in vipCardList" :key="index" style=" margin-top: 3%;"
						@click="changeBgColor(index)" :class="index == active ? 'active' : ''">
						<!-- <view class="boxll-num d-a-center">
							尊享{{item.num}}次免费服务
						</view> -->
						<view class="boxll-name d-center">
							{{ item.vipName }}
						</view>
						<view class="boxll-price d-center">
							<text class="jiage" style="margin-top: 8%;">
								￥
							</text>
							{{ item.salePrice }}
						</view>
						<view class="boxll-pricel d-center"> ￥{{ item.originalPrice }} </view>
						<view class="boxll-public">
							<!-- 立享88折 -->
						</view>
						<view class="d-j-center">
							<view class="boxll-quan">
								尊享{{item.num}}项专属权益
							</view>
						</view>

					</view>
				</view>
				<!-- #ifndef MP-WEIXIN -->
				<view v-if="isVip != 1" @click="payCard" class="no-repeat btn-buy d-center"
					style="margin: 5% 0 3% 0;background-image: url('http://loto.oss-cn-shanghai.aliyuncs.com/email/2822625fa3e6485f.png');">
					{{isVipValue}}
				</view>
				<!-- #endif -->

			</view>
			<view v-if="isVip != 1" class="font-sm flex align-center justify-center agree" style="margin-top: 24rpx;">
				<checkbox-group name="" @change="checkboxChange">
					<label>
						<checkbox value="0" color="#3C8EFF" style="transform:scale(0.5);color:#3C8EFF;" />
					</label>
				</checkbox-group>
				<text class="text-secondary bottomStyle">开通前请阅读</text>
				<text class="main-text-color bottomStyle" @click="nurseNeed()">《护士小鹿会员服务协议》</text>
			</view>
		</view>
		<view style="height: 16rpx;background: #F7F7F7;"></view>
		<!-- 会员特权 -->
		<view class="mar" style="width: 90%">
			<view class="title-huiyuan" style="margin: 3% 0 3% 0"> 会员特权 </view>
			<view class="menu">
				<view class=" menu-box" v-for="(item, index) in menu" :key="index" @click="toTequan(item.type)">
					<img :src="item.img" alt="" />
					<view class="menu-text">
						{{item.info}}
					</view>
				</view>
			</view>
		</view>


		<uni-popup ref="popupmark" type="bottom" :mask="true" :mask-click="false">
			<view class="marks column">
				<view class="cancel" @click="handleClose">×</view>
				<view class="time">支付方式</view>
				<!-- <view class="cont" @click="payOptions(0)">支付宝</view> -->
				<view class="cont" @click="payOptions(1)">微信</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-ui/uni-popup/uni-popup.vue'
	import {
		buyVip,
		selcetAllService,
		nurseVipPay
	} from '@/apis/purchase-member/purchase-member.js'
	import {
		selectNurseVipByNurseId
	} from '@/apis/nurse/index.js'
	export default {
		// import引入的组件需要注入到对象中才能使用
		components: {
			uniPopup,
		},
		data() {
			// 这里存放数据
			return {
				isAgree: false,
				payInfo: {},
				active: 0,
				list: [],
				checkPrice: '',
				isVipValue: '立即开通',
				isVipDeline: '您当前未开通会员',
				vipCardList: [{
					num: '5',
					salePrice: '298',
					originalPrice: '1699',
					vipName: '年卡会员'
				}],
				menu: [{
						img: 'http://loto.oss-cn-shanghai.aliyuncs.com/email/dff6bc5b48ef4bc1.png',
						type: 0,
						color: 0,
						info: '订单优先通知',
					}, {
						img: 'http://loto.oss-cn-shanghai.aliyuncs.com/email/e0bb6da567a24e52.png',
						type: 1,
						color: 0,
						info: '佣金结算增加',
					}, {
						img: 'http://loto.oss-cn-shanghai.aliyuncs.com/email/26d6e66260aa4a0d.png',
						type: 2,
						color: 0,
						info: '实体物品发放',
					},
					{
						img: 'http://loto.oss-cn-shanghai.aliyuncs.com/email/6f5a3696048f43f3.png',
						type: 3,
						color: 1,
						info: '培训视频观看',
					},
					{
						img: 'http://loto.oss-cn-shanghai.aliyuncs.com/email/188728edb6954edc.png',
						type: 4,
						color: 1,
						info: '商城专属优惠',
					},
				],
				userInfo: {},
				currentTime: '',
				isVip: 1,

			}
		},
		// 监听属性 类似于data概念
		computed: {},
		// 监控data中的数据变化
		watch: {},
		// 生命周期 - 创建完成（可以访问当前this实例）
		onLoad(options) {
			this.userInfo = this.$store.state.userInfo
		},
		// 生命周期 - 页面展示（不可以访问DOM元素）
		onShow() {
			this.selectNurseVipByNurseId()
			// this.handleClose()
		},
		// 生命周期 - 挂载完成（可以访问DOM元素）
		onReady() {},
		// 方法集合
		methods: {
			nurseNeed() {
				uni.navigateTo({
					url:'/pages/purchase/vip-rule'
				})
			},
			checkboxChange(e) {
				this.isAgree = e.detail.value.length > 0;
			},
			
			selectNurseVipByNurseId() {
				let obj = {
					nurseId: this.$store.state.userInfo.id
				}
				selectNurseVipByNurseId(obj).then(res => {
					console.log("会员信息", res.object)
					this.vipInfo = res.object
					this.isVip = res.object ? 1 : 0
					this.isVipDeline =
						res.object.expireTime.substr(0, 10).replace(/\//g, '-') + '到期'
					if (options.isVip == 1) {
						this.isVip = options.isVip
						this.isVipValue = '续费会员'
					} else {
						this.isVipValue = '开通会员'
					}
				})
			},
			toTequan(type) {
				console.log(22222222222, type)
				uni.navigateTo({
					url: '/pages/purchase/privilege?type=' +
						type +
						'&isVip=' +
						this.isVip,
				})
			},
			changeBgColor(index) {
				this.active = index
				this.checkPrice = this.list.vipCardList[index].salePrice
				this.menu = []
				if (this.active == 1) {
					this.menu.push({
						img: 'http://loto.oss-cn-shanghai.aliyuncs.com/email/04249f8b60f54f20.png',
						type: 1,
						info: '价值199元免费上门健康巡护一次',
						color: 0,
					}, {
						img: 'http://loto.oss-cn-shanghai.aliyuncs.com/email/60e5430e9b1b4d70.png',
						type: 0,
						info: '有效期3个月，购买成功后立即生效，全平台服务享受88折',
						color: 0,
					}, {
						img: 'http://loto.oss-cn-shanghai.aliyuncs.com/email/e2936feb48644e3e.png',
						type: 2,
						info: '3张 50元就医陪诊满减券',
						color: 1,
					}, {
						img: 'http://loto.oss-cn-shanghai.aliyuncs.com/email/e2936feb48644e3e.png',
						type: 2,
						info: '3张 50元上门护理满减券',
						color: 1,
					}, {
						img: 'http://loto.oss-cn-shanghai.aliyuncs.com/email/e2936feb48644e3e.png',
						type: 2,
						info: '2张 100元上门检测满减券',
						color: 1,
					}, {
						img: 'http://loto.oss-cn-shanghai.aliyuncs.com/email/e2936feb48644e3e.png',
						type: 2,
						info: '2张 100元陪伴照护满减券',
						color: 1,
					}, {
						img: 'http://loto.oss-cn-shanghai.aliyuncs.com/email/4e0a01b0f5c64aa0.png',
						type: 3,
						info: '专属护理顾问远程在线答疑',
						color: 0,
					})
				} else if (this.active == 0) {
					this.menu.push({
						img: 'http://loto.oss-cn-shanghai.aliyuncs.com/email/04249f8b60f54f20.png',
						type: 1,
						info: '价值189元，免费上门打针、采血、拆线、换药服务四选一',
						color: 0,
					}, {
						img: 'http://loto.oss-cn-shanghai.aliyuncs.com/email/04249f8b60f54f20.png',
						type: 1,
						info: '价值199元免费上门健康巡护一次',
						color: 0,
					}, {
						img: 'http://loto.oss-cn-shanghai.aliyuncs.com/email/60e5430e9b1b4d70.png',
						type: 0,
						info: '有效期1年，购买成功后立即生效，全平台服务享受88折',
						color: 0,
					}, {
						img: 'http://loto.oss-cn-shanghai.aliyuncs.com/email/e2936feb48644e3e.png',
						type: 2,
						info: '12张 50元就医陪诊满减券',
						color: 1,
					}, {
						img: 'http://loto.oss-cn-shanghai.aliyuncs.com/email/e2936feb48644e3e.png',
						type: 2,
						info: '12张 50元上门护理满减券',
						color: 1,
					}, {
						img: 'http://loto.oss-cn-shanghai.aliyuncs.com/email/e2936feb48644e3e.png',
						type: 2,
						info: '6张 100元上门检测满减券',
						color: 1,
					}, {
						img: 'http://loto.oss-cn-shanghai.aliyuncs.com/email/e2936feb48644e3e.png',
						type: 2,
						info: '6张 100元陪伴照护满减券',
						color: 1,
					}, {
						img: 'http://loto.oss-cn-shanghai.aliyuncs.com/email/4e0a01b0f5c64aa0.png',
						type: 3,
						info: '专属护理顾问远程在线答疑',
						color: 1,
					})
				}
				// console.log('季卡', this.menu);
			},
			handleClose() {
				this.$refs.popupmark.close()
			},
			handleMarks() {
				this.$refs.popupmark.open()
			},
			payCard() {
				if (!this.isAgree) {
					uni.showToast({
						title: '请先阅读并同意服务协议',
						icon: 'none'
					});
					return;
				}


				this.payOptions(1)
			},
			async payOptions(payType) {
				// if (!this.isAgree) {
				// 	uni.showToast({
				// 		title: '请先阅读并同意服务协议',
				// 		icon: 'none'
				// 	});
				// 	return;
				// }
				this.payInfo.nurseId = this.$store.state.userInfo.id
				let res = await buyVip(this.payInfo)
				console.log('支付111111111111111', res)
				if (res.success) {
					let obj = {
						id: '',
						number: res.object
					}
					let res1 = await nurseVipPay(obj)
					console.log('支付222222222222', res1)
					if (res1.success) {
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res1.object.timeStamp, // 时间戳（单位：秒）
							nonceStr: res1.object.nonceStr, // 随机字符串
							package: res1.object.package, // 固定值
							signType: res1.object.signType, //固定值
							paySign: res1.object.paySign, //签名
							orderInfo: res1.object,
							success(r) {
								console.log(r, '支付成功！')
							},
							fail(e) {
								console.log(e, '支付失败！')
								// 跳转到待付款的界面内
								setTimeout(function() {}, 1000)
							},
							complete(c) {
								if (c.errMsg.indexOf('ok') > -1) {
									setTimeout(function() {
										that.$store.state.orderStatus = 2
										that.$store.dispatch(
											'burryPoint',
											'payOverPage'
										)
									}, 1000)
								}
								console.log(c, '支付完成！')
								this.selectNurseVipByNurseId()

								this.handleClose()
							},
						})
					}
				}

			},
		},
		onHide() {}, // 生命周期 - 监听页面隐藏
		onUnload() {}, // 生命周期 - 监听页面卸载
	}
</script>
<style lang="less" scoped>
	.menus-name {
		font-size: 36rpx;
		font-weight: 500;
		color: #333333;
	}

	.user-name {
		font-size: 30rpx;
		font-weight: 500;
		color: #a76f2b;
	}

	.delineSty {
		font-size: 28rpx;
		font-weight: 500;
		color: #9f7138;
	}

	.boxll {
		margin-top: 2%;
		width: 45%;
		height: 350rpx;
		background: #f7f7f7;
		box-shadow: 0rpx 0rpx 8rpx 0rpx #e4e4e4;
		border-radius: 20rpx;
	}

	.boxll-num {
		width: 65%;
		height: 30rpx;
		background: linear-gradient(95deg, #686868 0%, #3A3A3A 100%);
		border-radius: 8rpx 8rpx 8rpx 0rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #E8CBAC;
		padding: 3%;
		margin-top: -25rpx;
	}

	.boxll-name {
		height: 25%;
		font-size: 32rpx;
		font-weight: 500;
		color: #000000;
		margin-bottom: 30rpx;
	}

	.boxll-price {
		color: #E75D4A;
		height: 15%;
		font-size: 64rpx;
		font-weight: 500;
	}

	.jiage {
		font-size: 32rpx;
		font-weight: 400;
		color: #E75D4A;
	}

	.boxll-pricel {
		height: 15%;
		font-size: 28rpx;
		font-weight: 400;
		color: #999999;
		text-decoration: line-through;
	}

	.boxll-public {
		height: 18%;
		font-size: 32rpx;
		font-weight: 500;
		color: #864500;
	}

	.boxll-quan {
		// width: 62%;
		height: 10%;
		font-size: 24rpx;
		font-weight: 500;
		color: #E2A060;
		background: #FFECD1;
		border-radius: 8rpx;
		opacity: 0.69;
		padding: 3%;
	}

	.info-bc {
		height: 250rpx;
		background-repeat: no-repeat;
		background-size: 100%;
	}

	.btn-buy {
		width: 98%;
		margin: 0 auto;
		height: 100rpx;
		font-size: 36rpx;
		font-weight: 500;
		color: #894200;
	}

	.no-repeat {
		background-repeat: no-repeat;
		background-size: 100%;
	}

	.time {
		margin-bottom: 20rpx;
		text-align: center;
	}

	.ll {
		border: 2rpx solid blue;
	}

	.menu {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.menu-box {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		height: 200rpx;
		padding: 1%;
		margin: 0.5%;
		background: #F7F7F7;
		width: 198rpx;
		height: 200rpx;
		border-radius: 22rpx;
		bottom: 12rpx;

		.menu-text {
			font-size: 24rpx;
			font-weight: 500;
			color: #3D3D3D;
		}
	}


	.active {
		border-radius: 20rpx;
		border: 4rpx solid #f1be77;
		background: linear-gradient(360deg, #f6cfa3 0%, #ffecd1 100%, #ffecd1 100%);
	}

	.uni-popup {
		z-index: 999;
	}

	.title-huiyuan {
		font-size: 36rpx;
		font-weight: 500;
		color: #333333;
	}

	.marks {
		position: relative;
		padding: 60rpx 0rpx 80rpx;
		width: 100%;
		background-color: #fff;
		border-radius: 32rpx 32rpx 0 0;
		box-sizing: border-box;
		z-index: 999;


		.cancel {
			font-size: 46rpx;
			position: absolute;
			top: 20rpx;
			right: 40rpx;
		}

		.font_num {
			position: absolute;
			bottom: 230rpx;
			right: 60rpx;
		}

		.title {
			position: relative;
			top: -14rpx;
			font-size: 32rpx;
		}

		.cont {
			color: #3c8eff;
			margin: 44rpx 0;
			text-align: center;


		}

		textarea {
			width: 670rpx !important;
			padding: 24rpx 34rpx;
			font-size: 28rpx;
			color: rgba(51, 51, 51, 1);
			background-color: rgba(246, 246, 246, 1);
			box-sizing: border-box;
			border-radius: 16rpx;
		}

		button {
			width: 90%;
			height: 90rpx;
			margin-top: 60rpx;
		}
	}
</style>